Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  // 获取当前时间
  getTime(){
    let now = new Date()
    let time=[]
    time[0]=now.getHours()
    time[1]=now.getMinutes()
    time[2]=now.getSeconds()

    // 将24小时制转换为12小时制
    if(time[0]>12){
      time[0]-=12
    }
    return time
  },

  drawClock(){
    //1.准备工作
    let width=300,height=300
    //获取画布上下文
    var ctx=this.ctx
    //设置画布中心为参照点
    ctx.translate(width/2,height/2)
    // 将画布逆时针旋转90度
    ctx.rotate(-Math.PI/2)

    // 2.绘制时钟刻度
    // 2.1绘制小时刻度
    // 设置线条粗细
    ctx.lineWidth=6
    // 设置线条末端样式
    ctx.lineCap='round'
    // 绘制12个小时刻度
    for(let i=0;i<12;i++){
      //开始路径
      ctx.beginPath()
      // 从(100,0)绘制到(120,0)
      ctx.moveTo(100,0)
      ctx.lineTo(120,0)
      // 描边路径
      ctx.stroke()
      // 顺时针旋转30度
      ctx.rotate(Math.PI/6)
    }

    // 2.2绘制分钟刻度
    // 设置线条粗细
    ctx.lineWidth=5
    // 设置线条末端样式
    ctx.lineCap='round'
    //绘制60个分钟刻度
    for(let i=0;i<60;i++){
      //开始绘制路径
      ctx.beginPath()
      //从(118,0)绘制到(120,0)
      ctx.moveTo(118,0)
      ctx.lineTo(120,0)
      ctx.stroke()
      // 顺时针旋转6度
      ctx.rotate(Math.PI/30)
    }

    // 3.获取当前时间
    let time=this.getTime()
    let h= time[0]
    let m=time[1]
    let s=time[2]
    // console.log(h,m,s);

    // 4.绘制时钟指针
    // 4.1 绘制时针
    //保存当前绘图状态
    ctx.save()

    //当前时针需要旋转的角度
    ctx.rotate(h*Math.PI/6+m*Math.PI/360+s*Math.PI/21600)
    //设置线条
    ctx.lineWidth=12
    //开始绘制路径
    ctx.beginPath()
    //从(-20,0)绘制到(80,0)
    ctx.moveTo(-20,0)
    ctx.lineTo(80,0)
    ctx.stroke()
    ctx.restore()
     // 4.2 绘制分针
    //保存当前绘图状态
    ctx.save()

    //当前分针需要旋转的角度
    ctx.rotate(m*Math.PI/30+s*Math.PI/1800)
    //设置线条
    ctx.lineWidth=8
    //开始绘制路径
    ctx.beginPath()
    //从(-20,0)绘制到(112,0)
    ctx.moveTo(-20,0)
    ctx.lineTo(112,0)
    //描边路径
    ctx.stroke()
    // 恢复之前保存的绘图样式
    ctx.restore()

      // 4.3 绘制秒针
    //保存当前绘图状态
    ctx.save()

    //当前秒针需要旋转的角度
    ctx.rotate(s*Math.PI/30)
    ctx.strokeStyle='red'
    //设置线条
    ctx.lineWidth=6
    //开始绘制路径
    ctx.beginPath()
    //从(-30,0)绘制到(120,0)
    ctx.moveTo(-30,0)
    ctx.lineTo(120,0)
    //描边路径
    ctx.stroke()

    ctx.fillStyle='red'
    ctx.beginPath()
    ctx.arc(0,0,10,0,Math.PI*2,true)
    ctx.fill()
    // 恢复之前保存的绘图样式
    ctx.restore()




    ctx.draw()

    //更新页面显示时间
    this.setData({
      h:h>9?h:'0'+h,
      m:m>9?m:'0'+m,
      s:s>9?s:'0'+s
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //创建画布上下文
    this.ctx=wx.createCanvasContext('clockCanvas')
    // this.ctx.fillStyle='red'
    // this.ctx.fillRect(0,0,300,300)
    // this.ctx.draw()
    this.drawClock()

    var that=this
    this.interval=setInterval(()=>{
      that.drawClock()
    },1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.interval)
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})